React-01 初识

react是用于构建用户界面的javascript库

中文官网：https://react.docschina.org

英文官网：https://reactjs.org/

一、介绍

什么是react

React 是Facebook内部的一个JavaScript类库（2013年的5月进行开源）。

React 可用于创建Web用户交互界面。

React不是一个完整的MVC框架,最多可以认为是MVC中的V（View）,甚至React并不非常认可MVC开发模式。

React 使用Facebook专门为其开发的一套语法糖--JSX。

React优缺点

优点：

（1）组件化开发
（2）引入虚拟DOM,性能好,响应速度快
（3）JSX语法糖
（4）单向数据绑定 Data Flow
（5）跨浏览器兼容
（6）完善的生态圈和活跃的社区

缺点：

不是完整MVC框架,不适用于复杂的大型应用

二、什么是虚拟DOM结构

相当于是一个对象当视图有更新的时候会生成一个新的对象，并与旧的进行比较把有区别的地方进行更新其他的不变这样提高了高速渲染

react中的diff算法

当使用React的时候，在某个时间点 render() 函数创建了一棵React元素树，在下一个state或者props更新的时候，render() 函数将创建一棵新的React元素树， React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方）

语法糖JSX

语法糖又叫做糖衣语法。

语法糖是指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。

它主要的目的是增加程序的可读性,从而减少程序代码错处的机会。

这个语法不能直接被浏览器所解析必须借助于babel文件去解析，把js和html混合使用
当它遇见<>的时候就自动解析为html标签如果它遇见{}会解析成js语法

三、快速尝试JSX

官方提供的CDN地址

<!-- ... 其它 HTML ... -->

<!-- 加载 React。-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

引入顺序：引入核心库 >> dom库 >> babel库

如果是普通的js语法，我们可以省略script标签的类型定义(type='text/javascript')，但是在react中，我们应用的是jsx语法糖，这个语法糖无法直接解析，必须通过babel解析，所以我们的类型不能省略text/babel；

<script type='babel'></script>

一个jsx的html文件例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container"></div>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <script type='text/babel'>
    const h = React.createElement
    const btn = <button>hello</button>
    ReactDOM.render(btn, document.querySelector('#container'))
  </script>
</body>
</html>

在JSX语法注意事项

因为for和class是关键字，因此需要修改；

只能有一个根元素；
必须有闭合标签，如果是单标签，需要自闭合（带/号）；
不能使用for，需要使用htmlFor；
不能使用class，需要使用className；
在input框中，默认值是使用defaultValue；
在checkbox/radio时，默认选中defaultChecked；

简单JSX语法

遇见{}会解析成js，遇见<>会解析成html标签；
{}里面不能写复杂的语句，但是支持三元运算符；
在jsx中使用字符串插值

<img src={img} />

在jsx中循环数组

let arr = [
    {name:'ls',age:18},
    {name:'ls',age:18}
]
let ele = (<ul>
    {arr.map((item,index)=>{
        return <li key={index}>{item.name}</li>
    })}
</ul>)

在jsx中建议使用map方法循环数组，map返回一个新的数组渲染到页面，循环的元素必须有key值；

createElement

react将createElement方法暴露出来，可以使用以下两种方法：

React.createElement(htmlName, props, content)

const e = React.createElement
return e('button', {}, 'hello')

// or
return <button>hello</button>

四、React中的样式

react中的样式优先级：css文件 --> module.css文件 --> scss文件

cssmodule文件将css样式模块化：1.module.css；

.img{
   width: 100px; 
}
.img2 {
    // 引入上面的类名;
    composes: img;
    width: 100px;
}

下面的例子使用模块化css，渲染时的class类名将是带hash值的，与其他的隔离，具有唯一性；

import style from './1.module.css'
const Div = <div className={style.img}></div>

全局css使用css文件或者scss文件即可；

五、key值

必须拿唯一值去代替，一般情况下，我们用数组返回来的id去赋值，如果实在没有，就用index索引，但是用索引有可能产生负面影响，组件有可能报错；注意：千万不要使用Math.Random()去做key值，因为Math.Random会导致频繁更新key值，会无法缓存组件；

六、其他语法

动态Style

在react中使用动态style样式时，必须使用驼峰命名法，
如果是px后缀可以直接写数字，react会自动添加px后缀，其他后缀需要添加字符串组成；
由于使用变量需要对象包裹，style的值也是一个对象；

<div style={{marginRigth: btnwidth}} />

<div style={{display: (index===this.state.currentIndex) ? "block" : "none"}}>...</div>

//or 
<div style={toggle ? 
  { background: 'blue', backgroundColor: 'red' } : 
  { backgroundColor: 'red' }
}>...</div>

动态class

className 指定css的class；

<div className={`icon-font ${this.state.flag ? 'iconfont' : ''}`}

渲染html标签

dangerouslySetInnerHTML

为了防止跨站脚本（XSS）的攻击，替换innerHTML，使用变量，可以解析html标签内容

<div dangerouslySetInnerHTML={{__html:this.state.htmlContent}}></div>

条件语句

在react中的标签部分不能直接使用if语句，但是可以使用三目运算符

{this.state.addarflag ? <Skeleton active /> : ''}  // 三目判断放标签
style={{display: this.state.flag ? 'block' : 'none'}}  // 三目显示隐藏标签

Reach__router

react-02 脚手架、JSX

React-01 初识 #

一、介绍 #

什么是react #

React优缺点 #

二、什么是虚拟DOM结构 #

react中的diff算法 #

语法糖JSX #

三、快速尝试JSX #

官方提供的CDN地址 #

一个jsx的html文件例子 #

在JSX语法注意事项 #

简单JSX语法 #

createElement #

四、React中的样式 #

五、key值 #

六、其他语法 #

动态Style #

动态class #

渲染html标签 #

条件语句 #